<template>
	<view class="content">
		<view style="text-align: center;" v-if="isShowGroupList">点击歌单修改</view>
		<uni-list v-if="isShowGroupList">
			<uni-list :border="true" v-for="(item,index) in list">
				<uni-list-chat clickable :title="item.name" :avatar="item.img" :note="item.about"
					@click="clickMusicGroup(item)">
				</uni-list-chat>
			</uni-list>
		</uni-list>
		<button @click="clicknew()" v-if="isShowGroupList">新增歌单</button>
		<view v-if="!isShowGroupList">
			<view>歌单名：</view>
			<uni-easyinput v-model="musicGroup.name" placeholder="歌单名"></uni-easyinput>
			<view>封面图URL：</view>
			<uni-easyinput v-model="musicGroup.img" placeholder="封面图URL"></uni-easyinput>
			<view>歌单描述：</view>
			<uni-easyinput type="textarea" autoHeight v-model="musicGroup.about" placeholder="请输入内容"></uni-easyinput>
			<view class="buttonview">
				<button style="width: 33%;" @click="deleteMusicGroup()">删除</button>
				<button style="width: 33%;" @click="saveMusicGroup()">保存</button>
				<button style="width: 33%;" @click="goback()">取消</button>
			</view>
			<view v-if="isShowMusicList">
				<button @click="() => {isShowMusicList = false}">增加歌曲</button>
				<view style="text-align: center;">↓点击删除歌曲↓</view>
				<uni-list>
					<uni-list :border="true" v-for="(item,index) in musicGroup.musicList">
						<uni-list-chat clickable :title="item.name" :avatar="HttpTool.getUrl()+item.img"
							:note="item.arname+'  '+item.alname" @click="clickMusic(index)">
						</uni-list-chat>
					</uni-list>
				</uni-list>
			</view>
			<view v-if="!isShowMusicList">
				<button @click="() => {isShowMusicList = true}">现有歌曲</button>
				<uni-easyinput v-model="name" placeholder="歌名"></uni-easyinput>
				<button @click="findMusic()">搜索</button>
				<view style="text-align: center;">↓点击增加歌曲↓</view>
				<uni-list>
					<uni-list :border="true" v-for="(item,index) in findMusicList">
						<uni-list-chat clickable :title="item.name" :avatar="HttpTool.getUrl()+item.img"
							:note="item.arname+'  '+item.alname" @click="clickAddMusic(item)">
						</uni-list-chat>
					</uni-list>
				</uni-list>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'FindCloudMusicList',
				name: '',
				list: [],
				musicGroup: {},
				isShowGroupList: true,
				isShowMusicList: true,
				findMusicList: []
			}
		},
		onLoad() {
			this.find()
		},
		methods: {
			clicknew() {
				this.musicGroup = {
					"name": "",
					"about": "",
					"img": "https://i.postimg.cc/NFg5BxYm/1024x1024bb.png",
					"userid": this.Device.deviceId,
					musicList:[]
				}
				this.isShowGroupList = false
			},
			async goback() {
				this.isShowGroupList = true
				this.find()
			},
			async find() {
				uni.showLoading({
					title: '获取歌单列表',
					mask: true
				})
				let res = await this.HttpTool.GetMusicGroupList(this)
				uni.hideLoading()
				if (res.code === 200) {
					this.list = res.data
				}
			},
			async findMusic() {
				uni.showLoading({
					title: '搜索中',
					mask: true
				})
				let res = await this.HttpTool.SelectMusic(this, {
					"name": this.name
				})
				uni.hideLoading()
				if (res.code !== 200) {
					return
				}
				this.findMusicList = res.data
			},
			async clickMusicGroup(musicGroup) {
				uni.showLoading({
					title: '获取歌单列表',
					mask: true
				})
				let res = await this.HttpTool.GetMusicGroup(this, musicGroup)
				uni.hideLoading()
				if (res.code !== 200) {
					return
				}
				this.musicGroup = res.data
				this.isShowGroupList = false
			},
			async clickMusic(index) {
				this.musicGroup.musicList.splice(index, 1)
			},
			async saveMusicGroup() {
				if(this.musicGroup.id === undefined || this.musicGroup.id === null ||this.musicGroup.id === ""){
					await this.saveNewMusicGroup()
				}
				if(this.musicGroup.id === undefined || this.musicGroup.id === null ||this.musicGroup.id === ""){
					return
				}
				uni.showLoading({
					title: '更新歌单',
					mask: true
				})
				let res = await this.HttpTool.updateMusicGroupMusic(this, this.musicGroup)
				uni.hideLoading()
				if (res.code === 200) {
					uni.showToast({
						title: '成功',
						duration: 2000,
					});
					this.goback()
				} else {
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon: 'error'
					});
				}
			},
			async saveNewMusicGroup() {
				let mList = this.musicGroup.musicList
				uni.showLoading({
					title: '创建歌单',
					mask:true
				})
				let res = await this.HttpTool.CreateMusicGroup(this, this.musicGroup)
				uni.hideLoading()
				if(res.code === 200){
					this.musicGroup = res.data
					this.musicGroup.musicList = mList
				}else{
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon: 'error'
					});
				}
			},
			async deleteMusicGroup() {
				uni.showLoading({
					title: '删除歌单',
					mask: true
				})
				let res = await this.HttpTool.DeleteMusicGroup(this, this.musicGroup)
				uni.hideLoading()
				if (res.code === 200) {
					uni.showToast({
						title: '成功',
						duration: 2000,
					});
					this.goback()
				} else {
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon: 'error'
					});
				}
			},
			clickAddMusic(item) {
				this.musicGroup.musicList.push(item)
				this.isShowMusicList = true
			}
		}
	}
</script>
<style>
	.buttonview {
		display: flex;
		flex-direction: row;
	}
</style>
